<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	</head>
	<body>
		<div id="app">
			<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
			  点我打开
			</el-button>
			
			<el-drawer
			  title="我是标题"
			  :visible.sync="drawer"
			  :direction="direction"
			  :before-close="handleClose">
			  <span>我来啦!</span>
			  <button type="button" @click="dialogTableVisible=true">打开</button>
			</el-drawer>
			
			<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
			  <el-table :data="gridData">
			    <el-table-column property="date" label="日期" width="150"></el-table-column>
			    <el-table-column property="name" label="姓名" width="200"></el-table-column>
			    <el-table-column property="address" label="地址"></el-table-column>
			  </el-table>
			</el-dialog>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data() {
			      return {
			        drawer: false,
			        direction: 'rtl',
					gridData:[],
					dialogTableVisible:false
			      };
			    },
			    methods: {
			      handleClose(done) {
			            done();
			      }
			    }
		})
	</script>
</html>
